<template>
    <a-layout-sider
        :trigger="null"
        style="height:100vh;color:white;position:fixed;left:0;overflow:auto"
        width="256"
        collapsible
        v-model="collapsed"
        theme="light"
    >
        <div class="logo">
            <img src="../../assets/logo.png" height="40" width="40" />
            <span :class="{ visible: collapsed }" class="fadeIn animated">
                happy codeing</span
            >
        </div>
        <a-menu theme="light" mode="inline" :defaultSelectedKeys="['1']">
            <a-sub-menu v-for="route in routes" :key="route.path">
                <span slot="title">
                    <i class="icon-box">
                        <svg class="icon" aria-hidden="true">
                            <use :xlink:href="route.meta.icon"></use>
                        </svg>
                    </i>

                    <a-icon type="x"></a-icon>
                    <span :class="{ visible: collapsed }">{{
                        route.meta.title
                    }}</span></span
                >

                <a-menu-item
                    v-for="item in route.children"
                    :key="item.path"
                    @click="linkTo(item.path)"
                >
                    <i class="icon-box">
                        <svg class="icon" aria-hidden="true">
                            <use :xlink:href="item.meta.icon"></use>
                        </svg>
                    </i>
                    <a-icon type="x"></a-icon>

                    <span class="title">{{
                        item.meta.title
                    }}</span></a-menu-item
                >
            </a-sub-menu>
        </a-menu>
    </a-layout-sider>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch, Emit } from 'vue-property-decorator';
import VueRouter, {
    RouteConfig,
    RouterOptions,
    Route,
    RouteRecord,
} from 'vue-router';
import '@/assets/iconfont/iconfont';
import 'animate.css';

@Component({
    components: {},
})
export default class Sider extends Vue {
    public routePath: string = '';

    @Prop({ default: false, type: Boolean })
    private collapsed!: boolean;

    @Emit('routePath') public send(path: string) {
        return;
    }

    get routes() {
        const routesTemp = (this.$router as any).options.routes;

        for (const r of routesTemp) {
            if (r.path === '/login' || r.path === '/' || r.path === '/about') {
                const index = routesTemp.indexOf(r);
                routesTemp.splice(index, 1);
            }
        }
        return routesTemp;
    }
    private linkTo(item: string) {
        this.routePath = item;
        this.send(this.routePath);
    }
}
</script>
<style lang="less" scoped>
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.icon-box {
    font-size: 16px;
    line-height: 40px;
    margin: 0;
    display: inline-block;
    font-style: normal;
    vertical-align: -0.125em;
    text-align: center;
    text-transform: none;
}
.visible {
    display: none;
}
</style>
